<template>
	<div class="save-paht-item">
		<div class="root">
			<div class="spread center">
				<el-icon :class="{ active: state.spread }" @click="state.spread = !state.spread">
					<ArrowRight />
				</el-icon>
			</div>
			<div class="icon center">
				<template v-if="props.type === 'save'">
					<el-tooltip
						v-if="props.edit"
						:effect="store.colorScheme"
						content="移除此路径"
						:show-after="800"
						placement="top">
						<el-icon class="edit" @click="emits('remove')"><RemoveFilled /></el-icon>
					</el-tooltip>
					<el-tooltip
						v-else-if="props.isAdd"
						:effect="store.colorScheme"
						content="加入此路径"
						:show-after="800"
						placement="top">
						<el-icon class="add" @click="emits('add')"><CirclePlusFilled /></el-icon>
					</el-tooltip>
					<el-icon v-else class="dir"><Folder /></el-icon>
				</template>
				<template v-if="props.type === 'image'">
					<el-checkbox v-model="myValue" />
				</template>
			</div>
			<el-tooltip
				v-if="props.path"
				:effect="store.colorScheme"
				:content="props.path"
				:show-after="800"
				placement="top">
				<div class="text beyond-hiding-reverse">{{ props.path.split('').reverse().join('') }}</div>
			</el-tooltip>
			<span class="count" v-if="!props.countNotShow">{{ props.children.length }}</span>
		</div>
		<div class="children" v-if="state.spread && props.children.length > 0">
			<slot></slot>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { useRootStore } from '@v/store';
import { Folder, CirclePlusFilled, RemoveFilled, ArrowRight } from '@element-plus/icons-vue';

const store = useRootStore();

const emits = defineEmits(['remove', 'add', 'update:modelValue']);

const props = defineProps({
	edit: {
		type: Boolean,
		default: false,
	},
	isAdd: {
		type: Boolean,
		default: false,
	},
	children: {
		type: Array,
		default() {
			return [];
		},
	},
	modelValue: {
		type: Boolean,
		default: false,
	},
	type: {
		type: String,
		default: 'save',
	},
	defaultSpread: {
		type: Boolean,
		default: false,
	},
	countNotShow: {
		type: Boolean,
		default: false,
	},
	path: String,
});

let myValue = ref(props.modelValue);

watch(myValue, (s) => {
	emits('update:modelValue', s);
});
watch(
	() => props.modelValue,
	(s) => {
		myValue.value = s;
	}
);

const state = reactive({
	spread: props.defaultSpread,
});

let tmp = props.children.length;
watch(props.children, (s) => {
	if (s.length > 0 && tmp === 0) {
		state.spread = true;
	}
	if (s.length === 0 && tmp > 0) {
		state.spread = false;
	}
	tmp = props.children.length;
});
</script>

<style scoped lang="scss">
.save-paht-item {
	background-color: var(--opacity-purity-color-8);
	border-radius: 4px;
	margin: 6px 6px 0 6px;
	overflow: hidden;
	.root {
		height: 52px;
		display: flex;
		align-items: center;
		position: relative;
		&:hover {
			background-color: var(--opacity-purity-color-6);
		}
		.center {
			display: flex;
			align-items: center;
		}
		.spread {
			margin: 0 15px;
			cursor: pointer;
			:deep(.el-icon) {
				transition: 0.2s;
				transform: rotate(0);
			}
			:deep(.el-icon.active) {
				transform: rotate(90deg);
			}
			:deep(.el-icon:hover) {
				color: var(--theme-main-color);
			}
		}
		.icon {
			margin-right: 10px;
			.add,
			.edit {
				cursor: pointer;
			}
			.edit:hover {
				color: var(--theme-danger-color);
			}
			.add:hover {
				color: var(--theme-main-color);
			}
		}
		.text {
			font-size: 13px;
			user-select: none;
			padding-right: 15px;
		}
		.count {
			position: absolute;
			right: 2px;
			top: 0px;
			font-size: 12px;
			transform: scale(0.8);
			user-select: none;
		}
		.children {
			padding: 6px 0;
		}
	}
}
</style>
